<template>
	<view class="message-orderInfo" :style="{ 'background-color': isFlow === 'out' ? '#FFF' : '#F2F2F2' }">
		<view class="status">
			<view class="label">案件状态：</view>
			<view class="value">
				<text>{{ orderInfo.status_title }}</text>
			</view>
		</view>
		<view class="status" v-if="isWeiKuan">
			<view class="label">尾款状态：</view>
			<view class="value">
				<text>{{ orderInfo.weikuan_is_pay == 0 ? '未支付' : '已支付' }}</text>
			</view>
		</view>
		<view class="type" v-if="isWeiKuan">
			<view class="label">案件名称：</view>
			<view class="value">{{ orderInfo.anjian_name }}</view>
		</view>
		<view class="type">
			<view class="label">案件类型：</view>
			<view class="value">{{ orderInfo.category_title }}</view>
		</view>
		<view class="remark" v-if="isWeiKuan">
			<view class="label">尾款备注：</view>
			<view class="value">{{ orderInfo.remark }}</view>
		</view>
		<view class="remark" v-else>
			<view class="label">案件备注：</view>
			<view class="value">{{ orderInfo.f_desc }}</view>
		</view>
		<view class="price" v-if="isWeiKuan">
			<view class="label">尾款金额：</view>
			<view class="value">{{ orderInfo.price }}</view>
		</view>
		<view class="price" v-else>
			<view class="label">案件金额：</view>
			<view class="value">
				<text>￥{{ orderInfo.price }}</text>
			</view>
		</view>
		<view class="btn" v-if="isFlow !== 'out' && orderInfo.status_title === '待付款'">
			<wd-button type="success" @click="toPay" custom-class="wd-button-custom-class-my-success wd-button-custom-class-w50 ">同意委托</wd-button>
		</view>
		<view class="btn" v-if="isFlow !== 'out' && orderInfo.weikuan_is_pay === 0">
			<wd-button type="success" @click="toWkPay" custom-class="wd-button-custom-class-my-success wd-button-custom-class-w50 ">支付尾款</wd-button>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { watch, ref, onMounted } from 'vue';
import { queryCaseOrderInfo, queryWeikuanPayStatus } from '@/api/index';
import useRouter from '@/hooks/useRouter';
import api from '@/api/index';
interface IProps {
	content: Record<string, any>;
	flow: Record<string, any>;
}
const router = useRouter();
const props = withDefaults(defineProps<IProps>(), {
	content: () => ({}),
	flow: () => ({})
});
const data = ref();
const orderInfo = ref({
	status_title: '',
	category_title: '',
	f_desc: '',
	price: ''
});
const isFlow = ref();
const isWeiKuan = ref(false);
const toPay = () => {
	router.push({
		url: '/commonPage/imCasePerfect/imCasePerfect',
		params: { orderId: orderInfo.value.id, categoryId: orderInfo.value.category_id }
	});
};
const toWkPay = () => {
	if (uni.$appConfig.platform === 'user') {
		uni.$wdToast.confirm('确定支付当前尾款吗？', '提示').then((res: any) => {
			api.paymentWeikuan({
				weikuan_order_id: orderInfo.value.weikuan_order_id
			}).then((res) => {
				console.log(res);
				getOrder(orderInfo.value, orderInfo.value.id);
			});
		});
	}
};
const getOrder = (temp, orderId) => {
	queryCaseOrderInfo({
		anjian_order_id: orderId
	}).then((res) => {
		orderInfo.value = {
			...res,
			...temp
		};
		if (isWeiKuan.value && orderInfo.value.weikuan_order_id) {
			queryWeikuanPayStatus({
				weikuan_order_id: orderInfo.value.weikuan_order_id
			}).then((res) => {
				orderInfo.value['weikuan_is_pay'] = res.is_pay;
			});
		}
		setTimeout(() => {
			getOrder(temp, orderId);
			// 模拟异步操作，确保数据更新后再更新视图。
			// 这里使用setTimeout，实际应用中可以使用Vue的nextTick方法。
		}, 10000);
	});
};
onMounted(() => {
	isFlow.value = props.flow;

	let temp = JSON.parse(props.content.custom);
	if (!temp.orderId) {
		return false;
	}
	if (orderInfo.value && temp.orderId === orderInfo.value.id) {
		return false;
	}
	data.value = props.content;
	if (temp.type === '尾款') {
		isWeiKuan.value = true;
	}
	if (temp.orderId) {
		getOrder(temp, temp.orderId);
	}
});
</script>
<style lang="scss" scoped>
.message-orderInfo {
	background-color: #fff;
	border-radius: 15rpx;
	padding: 24rpx;
	font-family: PingFang;
	font-weight: 400;
	font-size: 26rpx;
	color: #999999;
	width: calc(100% - 24rpx - 24rpx);
	min-width: 340rpx;

	.status,
	.type,
	.remark,
	.price {
		display: flex;
		margin-bottom: 15rpx;
		justify-content: space-between;

		.label {
			width: 140rpx;
		}

		.value {
			flex: 1;
			text-align: right;
			color: #000000;

			text {
				color: rgba(201, 28, 31, 1);
			}
		}
	}

	.btn {
		text-align: center;
		margin-top: 24rpx;

		.wd-button-custom-class-w50 {
			width: 50%;
			height: 60rpx !important;
			line-height: 60rpx !important;
			margin-top: 24rpx;
		}
	}
}
</style>
